<template>
  <div class="app-container">
    <el-form ref="data" :model="data" label-width="120px">
      <el-form-item label="名称">
        <el-input v-model="data.name" />
      </el-form-item>
      <el-form-item label="种类">
        <el-select v-model="data.bcid" placeholder="请选择你的种类">
          <el-option label="蛋糕" value="1" />
          <el-option label="面包" value="11" />
          <el-option label="小食" value="6" />
          <el-option label="配件" value="5" />
        </el-select>
      </el-form-item>

      <el-form-item label="图片">
        <imgUpdata />
      </el-form-item>

      <!-- 表格 -->
      <el-form-item label="规格">
        <cake v-if="data.bcid == 1" @share="shareData" />
        <other v-else @share="shareData" />
      </el-form-item>

      <el-form-item label="说明">
        <el-input v-model="data.chineseBrief" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import cake from './components/cake.vue'
import other from './components/other.vue'
import imgUpdata from './components/imgUpdata.vue'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    cake, other, imgUpdata
  },
  data() {
    return {
      data: {
        name: '', // 名称
        bcid: '1', // 种类
        chineseBrief: '', // 说明
        price: '0',
        list: []
      }
    }
  },
  methods: {
    onSubmit() {
      // 判断是否输入名字
      if (this.data.name === '') {
        this.$message({
          message: '请输入商品名称！',
          type: 'warning'
        })
        // 判断是否有价格
      } else if (this.data.list.length) {
        // console.log(this.data.list)
        // 判断价格是否错误
        const bol = this.data.list.some(e => {
          return isNaN(e.price)
        })
        if (bol) {
          this.$message({
            message: '价格有错误!',
            type: 'warning'
          })
        } else {
          this.$message({
            message: '添加成功，祝大卖！',
            type: 'success'
          })
          // 默认商品展示页价格就是1磅价格
          const priceList = this.data.list.filter((element) => {
            if (element.spec === '1磅') {
              return element.spec === '1磅'
            } else if (element.spec === '2磅') {
              return element.spec === '2磅'
            } else if (element.spec === '3磅') {
              return element.spec === '3磅'
            } else if (element.spec === '4磅') {
              return element.spec === '4磅'
            } else if (element.spec === '5磅') {
              return element.spec === '5磅'
            } else {
              return element
            }
          })
          this.data.price = priceList[0].price
          this.$store.commit('datas/dataCatch', this.data)
        }
      } else {
        this.$message({
          message: '请填写价格！',
          type: 'warning'
        })
      }
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },

    shareData(ChildenData) {
      this.data.list = ChildenData
    }
  }
}
</script>
